<template>
  <ContentBase>
    <div class="card" v-for="user in users" :key="user.id" @click="open_user_profile(user.id)">
      <div class="card-body">
        <div class="row">
          <div class="col-1 img-field">
            <!-- img-fluid意思是让图片支持响应式布局，框越小图越小，框越大图越大 -->
            <img :src="user.photo" class="img-fluid" alt="">
          </div>
          <div class="col-11">
            <div class="username">{{user.username}}</div>
            <div class="followcount">{{ user.followerCount }}</div>

          </div>
        </div>
      </div>
    </div>
  </ContentBase>
</template>

<script>
// @ is an alias to /src
import ContentBase from '../components/ContentBase.vue';
import { ref } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import router from '@/router/index.js';
export default {
  name: 'UserListView',
  components: {
    ContentBase,
  },
  setup(){
    let users=ref([]);
    let store=useStore();
    $.ajax({
      url:"https://app165.acapp.acwing.com.cn/myspace/userlist/",
      type:"GET",
      success:(res)=>{
        users.value=res;
      }
    });
    const open_user_profile=(userId)=>{ 
      if(store.state.user.is_login){ //如果登录了,就跳转到用户动态页面
        router.push({
          name:'userprofile',
          params:{userId}
        });
      }
      else{
        router.push({name:'login'});
      }
    };
    return {
      users,
      open_user_profile,
    }
  }
}
</script>

<style scoped>
img{
  border-radius: 50%;
}
.username{
  font-size: 20px;
  font-weight: bold;
  height: 50%;
}
.followcount{
  font-size: 14px;
  color: gray;
  height: 50%;
}
.card{
  margin-bottom: 10px;
  cursor: pointer;
}
.card:hover{
  box-shadow: 2px 2px 10px gray;
  transition: 0.5s;
}
.img-field {
  display: flex;
  flex-direction: column;
  justify-content: center; 
}
</style>